import React, { Component } from 'react'
import './style.css'

export class OrderItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editing: false,
      stars: props.data.stars || 0,
      comment: props.data.comment || ''
    }
  }

  render() {
    const { shop, product, price, picture, ifCommented } = this.props.data
    return (
      <div className="orderItem">
        <div className="orderItem__picContainer">
          <img className="orderItem__pic" src={picture} alt="123" />
        </div>
        <div className="orderItem__content">
          <div className="orderItem__product">{product}</div>
          <div className="orderItem__shop">{shop}</div>
          <div className="orderItem__detail">
            <div className="orderItem__price">{price}</div>
            <div>
              {ifCommented? (
                <button className="orderItem__btn orderItem__btn--grey">
                  已评价
                </button>
              ) : (
                <button
                  className="orderItem__btn orderItem__btn--red"
                  onClick={this.handleOpenEditArea}
                >
                  评价
                </button>
              )}
            </div>
          </div>
        </div>
        {this.state.editing ? this.renderEditArea() : null}
      </div>
    )
  }

  renderEditArea() {
    return (
      <div className="orderItem__commentContainer">
        <textarea
          value={this.state.comment}
          onChange={this.handleCommentChange}
          className="orderItem__comment"
        />
        {this.renderStars()}
        <button onClick={this.handleSubmitComment} className="orderItem__btn orderItem__btn--red">提交</button>
        <button onClick={this.handleCancelComment} className="orderItem__btn orderItem__btn--grey">取消</button>
      </div>
    )
  }

  renderStars() {
    const { stars } = this.state
    return (
      <div>
        {[1, 2, 3, 4, 5].map((item, index) => {
          const light = stars >= item ? 'orderItem__star--light' : ''
          return (
            <span key={index} className={light} onClick={this.handleClickStars.bind(this, item)}>
              ★
            </span>
          )
        })}
      </div>
    )
  }

  handleOpenEditArea = () => {
    this.setState({
      editing: true
    })
  }

  handleCommentChange = (e) => {
    this.setState({
      comment: e.target.value
    })
  }

  handleClickStars = (stars) => {
    this.setState({
      stars
    })
  }

  handleCancelComment = () => {
    this.setState({
      editing: false,
      stars: this.props.data.stars || 0,
      comment: this.props.data.comment || ''
    })
  }

  handleSubmitComment = () => {
    const { id } = this.props
    const { comment, stars } = this.state
    this.setState({
      editing: false
    })
    this.props.onSubmit(id, comment, stars)
  }
}

export default OrderItem
